<template>
	<view class="container">
		<view class="page-body">
			<!-- 坚持天数 -->
			<view class="page-section">
				<view class="insist-day">
					<text>本周已坚持饮食打卡{{foodClockInDays}}天 运动打卡{{exerciseClockInDays}}天</text>
				</view>
			</view>

			<!-- 饮食记录 -->
			<view class="page-section">
				<view class="title-box">
					<text>饮食记录</text>
				</view>

				<view class="record-body">
					<view class="record-content1">
						<text class="title-box">今日饮食情况： </text>
						<view class="record-item" v-for="(item,i) in meals" :key="i">
							<uni-icons type="smallcircle-filled" size="20"></uni-icons>
							<text>打卡{{i+1}}：{{item.details}} </text>
						</view>
					</view>

					<view class="record-content2">
						<view class="record-content2-left">
							<view class="record-item" v-for="(item,i) in nutrients" :key="i">
								<view class="text-box">
									<text>{{item.name}}</text>
								</view>
								<view class="progress-box">
									<progress :percent="item.percent" active stroke-width="3"> </progress>
								</view>
							</view>
						</view>

						<view class="record-content2-right">
							<view class="record-item" v-for="(item,i) in nutrients" :key="i">
								<view class="data-box">
									<text>{{item.value}}{{item.unit}}</text>
								</view>
								<view class="text-box">
									<text>{{item.percent}}%</text>
								</view>
							</view>

						</view>
					</view>

					<view class="record-content3">
						<view class="button-box">
							<button size="mini" @tap="goToPage('/pages/health/plan/plan')">自定义计划</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 运动记录 -->
			<view class="page-section">
				<view class="title-box">
					<text>运动记录</text>
				</view>

				<view class="record-body">
					<view class="record-content1">
						<text class="title-box">今日运动情况： </text>
						<view class="record-item" v-for="(item,i) in sports" :key=i>
							<view class="iconfont icon-yundonghuwaileimu"></view>
							<text>打卡{{i+1}}：{{item.details}}</text>
						</view>
					</view>

					<view class="record-content2">
						<view class="record-content2-left">
							<view class="record-item" v-for="(item,i) in  exerciseData" :key="i">
								<view class="text-box">
									<text>{{item.name}}</text>
								</view>
								<view class="progress-box">
									<progress :percent="item.percent" active stroke-width="3"> </progress>
								</view>
							</view>
						</view>

						<view class="record-content2-right">
							<view class="record-item" v-for="(item,i) in exerciseData" :key="i">
								<view class="data-box">
									<text>{{item.value}}{{item.unit}}</text>
								</view>
								<view class="text-box">
									<text>{{item.percent}}%</text>
								</view>
							</view>
						</view>
					</view>

					<view class="record-content3">
						<view class="button-box">
							<button size="mini" @tap="goToPage('/pages/health/plan/plan')">自定义计划</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 坚持天数
				foodClockInDays: '--',
				exerciseClockInDays: '--',

				// 饮食情况
				meals: [{
						details: '--'
					},
					{
						details: '--'
					},
					{
						details: '--'
					},
				],

				// 营养成分的数组
				nutrients: [{
						name: '热量',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: '千卡'
					},
					{
						name: '蛋白质',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: 'g'
					},
					{
						name: '脂肪',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: 'g'
					},
					{
						name: '糖分',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: 'g'
					},
					{
						name: '维生素',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: 'g'
					},
				],

				//运动打卡情况
				sports: [{
						details: '--'
					},
					{
						details: '--'
					},
					{
						details: '--'
					},
				],

				// 用于接受微信云步数
				stepInfo: [],

				// 运动数据
				exerciseData: [{
						name: '卡路里',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: '千卡'
					},
					{
						name: '步数',
						plan: 0,
						percent: 0.0,
						value: 0,
						unit: '步'
					},
				],
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			// 初始化
			async init() {
				let that = this
				this.$https({
					url: this.$baseUrl + '/health/daily',
					success(res) {
						that.getUserRun();
						let d = res.data.data;
						console.log(d);
						// 坚持
						that.exerciseClockInDays = d.exerciseClockInDays;
						that.foodClockInDays = d.foodClockInDays;
						// 饮食部分设置
						that.nutrients[0].plan = d.plan.energy;
						that.nutrients[0].value = d.totalEnergyIngestion;
						if (d.plan.energy !== 0) that.nutrients[0].percent = d.totalEnergyIngestion / d.plan
							.energy * 100;
						that.nutrients[1].plan = d.plan.protein;
						that.nutrients[1].value = d.totalProteinIngestion;
						if (d.plan.protein !== 0) that.nutrients[1].percent = d.totalProteinIngestion / d.plan
							.protein * 100;
						that.nutrients[2].plan = d.plan.fat;
						that.nutrients[2].value = d.totalFatIngestion;
						if (d.plan.fat !== 0) that.nutrients[2].percent = d.totalFatIngestion / d.plan.fat *
							100;
						that.nutrients[3].plan = d.plan.sugar;
						that.nutrients[3].value = d.totalSugarIngestion;
						if (d.plan.sugar !== 0) that.nutrients[3].percent = d.totalSugarIngestion / d.plan
							.sugar * 100;
						that.nutrients[4].plan = d.plan.cellulose;
						that.nutrients[4].value = d.totalCelluloseIngestion;
						if (d.plan.cellulose !== 0) that.nutrients[4].percent = d.totalCelluloseIngestion / d
							.plan.cellulose * 100;
						that.exerciseData[0].plan = d.plan.calories;
						that.exerciseData[0].value = d.totalConsumption;
						if (d.plan.calories !== 0) that.exerciseData[0].percent = d.totalConsumption / d.plan
							.calories * 100;
						that.exerciseData[1].plan = d.plan.path;
					},
					fail(res) {
						console.log(res)
					}
				})
			},


			// 获得微信步数授权
			async getUserRun() {
				let that = this
				await uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.werun']) {
							uni.authorize({
								scope: 'scope.werun',
								success() {
									that.getRunData()
								},
								fail() {
									uni.showModal({
										title: '读取运动数据失败',
										content: '请在小程序右上角【设置】中开启授权'
									})
								}
							})
						} else {
							that.getRunData()
						}
					}
				})
			},

			// 获得微信步数数据
			async getRunData() {
				let that = this
				uni.showLoading({
				  title: '加载数据中',
				});
				await uni.getWeRunData({
					success(res) {
						wx.cloud.init()
						wx.cloud.callFunction({
							name: "getRunData",
							config: {
								env: 'cloud1-6g6qzfike8019fd5'
							},
							data: {
								weRunData: wx.cloud.CloudID(res.cloudID)
							},
						}).then(res => {
							that.stepInfo = res.result.weRunData.data.stepInfoList;
							that.exerciseData[1].value = that.stepInfo[30].step;
							if (that.exerciseData[1].plan !== 0) that.exerciseData[1].percent = that
								.stepInfo[30].step / that.exerciseData[1].plan * 100;
						}).catch(failRes => console.log(failRes))
					},
					complete: () => {
					  // 隐藏loading
					  uni.hideLoading();
					},
				})
			},
			// 跳转到打卡界面
			goToPage(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
	@import "record.css";
</style>
